<template>
	<div>
		<mt-tabbar fixed v-model="selected" class="footers">
	      <mt-tab-item id="首页">
	        <i class="iconfont tabs-icon" slot="icon">&#xe622;</i>
	        <router-link to="index"></router-link>
	        首页
	      </mt-tab-item>
	      <mt-tab-item id="tab2">
	        <i class="iconfont tabs-icon" slot="icon">&#xe6e1;</i>
	        <router-link to="HelloWorld"></router-link>
	        消息
	      </mt-tab-item>
	      <mt-tab-item id="tab3">
	        <i class="iconfont tabs-icon" slot="icon">&#xe624;</i>
	        <router-link to="tab3"></router-link>通讯录
	      </mt-tab-item>
	      <mt-tab-item id="个人中心">
	        <i class="iconfont tabs-icon" slot="icon">&#xe677;</i>
	        <router-link to="my"></router-link>个人中心
	      </mt-tab-item>
	      <!-- <mt-tab-item id="tab5">
	        <i class="iconfont tabs-icon" slot="icon">&#xe624;</i>
	        <router-link to="/"></router-link>tab5
	      </mt-tab-item> -->
	    </mt-tabbar>		
	</div>
</template>
<script type="text/javascript">
import { Tabbar, TabItem } from 'mint-ui';
	export default{
		data(){
			return{
				selected:'首页'
			}
		}
	}
</script>
<style lang="less" scoped>
.footers .mint-tab-item-label a {
    display: block;
    width: 25%;
    height: 55px;
    position: absolute;
    bottom: 0;
}
.mt-tabbar .mint-tab-item .mint-tab-item-label a{text-decoration: none;}

</style>